<template>
  <div class="dashboard">
    <topAndbottom>
      <template #title>经验库</template>
      <template #container>
        <div class="common-container">
          <div class="container-search">
            <el-form :model="tableDate.searchParams" label-width="80px" @submit.native.prevent="" :inline="true"
              size="default">
              <el-form-item label="经验名">
                <el-input v-model="tableDate.searchParams.experienceName" @keyup.enter.native="" clearable
                  @clear="serachBtn" />
              </el-form-item>
              <el-form-item>
                <el-button :icon="Search" @click="serachBtn" type="primary">搜索</el-button>
              </el-form-item>
              <el-form-item>
                <!-- <el-radio-group v-model="tableDate.radio1" size="small" @change="ExperienceChange">
                  <el-radio label="1" size="large" border>显示我的</el-radio>
                  <el-radio label="2" size="large" border>显示全部</el-radio>
                </el-radio-group> -->
                <el-checkbox v-model="tableDate.radio1" @change="ExperienceChange">显示我的</el-checkbox>
                <el-button :icon="Plus" type="success" @click="addBtn" style="margin-left: 10px;">新增</el-button>
                <el-button :icon="Close" @click="resetBtn" style="margin-right: 12px;" type="danger">重置</el-button>
                <!-- <el-select v-model="tableDate.statusId" placeholder="请选择经验库类型" @change="ExperienceChange"
                  value-key="value" :popper-append-to-body="false" style="margin-right: 12px;">
                  <el-option v-for="option in tableDate.ExperienceList" :key="option.id" :label="option.name"
                    :value="option.id" />
                </el-select> -->
                <el-select v-if="tableDate.radio1 === true" v-model="tableDate.search.auditStatus" placeholder="请选择审核状态" @change="AuditStatusChange"
                  style="margin-left: 20px;" clearable value-key="value" :popper-append-to-body="false">
                  <el-option v-for="option in tableDate.audiStatus" :key="option.id" :label="option.name"
                    :value="option.id" />
                </el-select>

              </el-form-item>
            </el-form>
          </div>
          <div class="container-table">
            <el-table v-loading="tableDate.Loading" :height="tableDate.tableHeight" :data="tableDate.list" :row-class-name="tableRowClassName" class="custom-table"
              style="width: 100%">
              <el-table-column prop="username" show-overflow-tooltip label="创建人" align="center" />
              <el-table-column prop="experienceName" show-overflow-tooltip label="经验名称" align="center" />
              <el-table-column prop="createTime" show-overflow-tooltip label="创建时间" align="center">
                <template #default="scope">
                  {{
                    global.$formatDateTime(scope.row.createTime)
                  }}
                </template>
              </el-table-column>
              <el-table-column show-overflow-tooltip label="审核状态" align="center">
                <template #default="scope">
                  {{
                    scope.row.auditStatus === "0"
                    ? "待审核"
                    : scope.row.auditStatus === "1"
                      ? "审核成功"
                      : "审核驳回"
                  }}
                </template>
              </el-table-column>
              <el-table-column label="操作" min-width="100" align="">
                <template #default="scope">
                  <!-- <el-button type="primary" :icon="Edit" @click="editBtn(scope.row)">编辑</el-button> -->
                  <!-- <el-popconfirm
                    confirm-button-text="Yes"
                    width="350"
                    cancel-button-text="No"
                    icon-color="#626AEF"
                    :title="scope.row.experienceName + ' 是否通过审核?'"
                    @confirm="confirmEvent(scope.row)"
                    @cancel="cancelEvent(scope.row)"
                  >
                    <template #reference>
                      <el-button type="primary" :icon="Check">审核</el-button>
                    </template>
                  </el-popconfirm> -->
                  <el-button v-if="scope.row.auditStatus != '1'" type="warning" :icon="Edit"
                    @click="editBtn(scope.row)">修改</el-button>
                  <el-button type="primary" :icon="View" @click="detailBtn(scope.row)">{{ scope.row.auditStatus === '0' ?
                    '审核' : '详情' }}</el-button>
                </template>
              </el-table-column>
            </el-table>
          </div>
          <div class="container-footer">
            <el-pagination :current-page="tableDate.search.page" :page-size="tableDate.search.size"
              :page-sizes="[5, 10, 20, 50]" layout="total, sizes, prev, pager, next, jumper" :total="tableDate.total"
              @size-change="handleSizeChange" @current-change="handleCurrentChange" />
          </div>
        </div>
      </template>
    </topAndbottom>
    <AddEdit ref="RefMyExperience" @save="save"></AddEdit>
    <Details ref="RefExperienceDetail" @examineStatus="getExperiencePage" :experienDetail="tableDate.viewExperien">
    </Details>
  </div>
</template>

<script setup lang='ts'>
import { Search, Plus, Edit, Check, Close, View } from "@element-plus/icons";
import Details from "./components/Detail.vue";
import AddEdit from "./components/AddEdit.vue";
import tableModel from "./tsModel/TableModel";
import addEdit from "./tsModel/AddEdit";
import useInstance from "@/hooks/useInstance";
import detail from "./tsModel/Detail";
const { global, proxy } = useInstance();
const {
  tableDate,
  getExperiencePage,
  serachBtn,
  resetBtn,
  handleSizeChange,
  handleCurrentChange,
  detailBtn,
  ExperienceChange,
  AuditStatusChange,
  tableRowClassName,
  RefExperienceDetail,
} = tableModel();
const {
  addBtn,
  editBtn,
  deleteBtn,
  RefMyExperience,
  save,
  cancelEvent,
  confirmEvent,
} = addEdit(tableDate, getExperiencePage, detailBtn);
</script>
<style scoped lang='scss'>
.dashboard {
  height: 100%;
  :deep(.el-form-item__label) {
    color: #fff;
  }
}
</style>